import React, { Component } from 'react';
import '../styles/Detail.scss'
import { LeftOutline, DownlandOutline, FillinOutline, } from 'antd-mobile-icons'
import * as service from '../api/index'
class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            bottomlist: [
                // {
                //     name: '加入书架', icon: <AppstoreOutline />
                // },
                // {
                //     name: '听书', icon: <AppstoreOutline />
                // },
                // {
                //     name: '阅读', icon: <AppstoreOutline />
                // },

            ],
            detaillist: []
        }
    }
    back() {
        this.props.history.goBack()
    }
    async componentDidMount(){
        var res =await service.detail_list()
        // console.log(res.data);
        this.setState({detaillist:res.data})
    }
    render() {
        return (
            <div className='detail'>
                <div className="top">
                    <span onClick={() => { this.back() }}><LeftOutline /></span>
                    <div className="right">
                        <span><DownlandOutline /></span>
                        <span><FillinOutline /></span>
                    </div>
                </div>
                <div className="div">
                    {
                        this.state.detaillist.map((item,index) => {
                            // console.log(this.state.detaillist);
                            return (
                                <div className="title" key={index}>
                                    <div className="photo">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="name">
                                        <h3>{item.title}</h3>
                                        <p>{item.name}</p>
                                        <p>豆瓣评分<span>8.8</span></p>
                                    </div>
                                </div>
                            )
                        })
                    }
                    <div className="desc">
                        <p>本书虽为中药学专书，但涉及范围广泛，对植物学、动物学、矿物学、物理学、化学、农学等内容亦有很多记载。如在矿物学方面对石油的产地、性状作了详细记述；在化学方面，阐述了检验石胆真伪的方法；在物理学方面，从空气中的湿度变化，以推测雨量的大小；在农学方面，阐述采用嫁接技术，以改良果树品种的方法等。
                        </p>
                        <p>对中医药理论有所发明，书中强调对中药应该辨证应用，如藜芦条下称“吐药不一，常山吐疟痰，瓜丁吐热痰，乌附尖吐湿痰，莱菔子吐气痰，藜芦则吐风痰者也”。
                        </p>
                        <p>对中医药理论有所发明，书中强调对中药应该辨证应用，如藜芦条下称“吐药不一，常山吐疟痰，瓜丁吐热痰，乌附尖吐湿痰，莱菔子吐气痰，藜芦则吐风痰者也”。
                        </p>
                    </div>
                    <div className="jieshao">
                        <p>相关推荐</p>
                        <div className="hezi">
                            <div className="con">
                                <img src="" alt="" />
                                <p>介绍</p>
                            </div>
                            <div className="con">
                                <img src="" alt="" />
                                <p>介绍</p>
                            </div>
                            <div className="con">
                                <img src="" alt="" />
                                <p>介绍</p>
                            </div>
                        </div>
                    </div>
                    {/* <div className="box">
                        <div className="bottom">
                            {
                                this.state.bottomlist.map((item, index) => {
                                    return (
                                        <div className="item" key={index}>
                                            <div className="icon">
                                                {item.icon}
                                            </div>
                                            <div className="name">{item.name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div> */}
                </div>
            </div>
        );
    }
}

export default Detail;